<template>
  <div class="detail-box">
    <div class="first">
      <img class="title" src="/images/jinghe/right/产业重点外企概况@2x.png">
      <div class="firstContent">
        <li>统计时间：{{ time }}</li>
        <!-- <tabList :poptitle="titleList" :popdata="jzList"  :itemStyle="itemStyle" style="padding-top: 33px;"/> -->
        <chanye :dataList="ListData" :one="one" :two="two" style="padding-top: 36px;"/>
        <verdict :poptext="jlList1" />
      </div>
    </div>
    <div class="first second">
      <img class="title" src="/images/jinghe/right/外企国别分布@2x.png">
      <div class="firstContent">
        <li>统计时间：{{ time }}</li>
        <pieTu :data="pieData" :total="total" style="padding-top: 25px;"/>

        <verdict :poptext="jlList2"/>
      </div>
      
    </div>
  </div>
</template>

<script>
import verdict from '../components/verdict'
import pieTu from './components/pieTu'
import chanye from './components/chanye'

export default {
  data () {
    return {
      jlList1:'',
      jlList2: '',
      dy: '',
      xfly: '',
      pieData: [],
      ListData: [],
      time: "2020.12",
      total: 0,
      one: '',
      two: ''
    }
  },
  components: { verdict, pieTu,chanye },
  watch: {

  },
  methods: {
    async getList4(){
      // let x = await this.$api.get('/es/jsc/cyjh_zdwq',{xfhy: this.xfly, country: this.dy})
      // let xx = await this.$api.get('/es/jsc/cyjh_zdwq_new',{industry: this.industry})
      let xx = await this.$api.get('/es/jsc/cyjh_zdwq_new',{industry: this.$route.query.industry})


      let mydata1 = []
      this.ListData = []

      this.total = 0
      // console.log(xx,xx.data['侧图数据']);
      if(xx.status == 200){
        let x = xx.data['侧图数据']
        mydata1 = eval(x['外企主要分布国别'])
        this.jlList1 = x['conclusion1']
        this.ListData = eval(x['主要外企列表'])
        this.one = x['国外专利权人数']
        this.two = x['国外专利数']

        this.jlList2 = x['conclusion2']

        mydata1.forEach(element => {
          this.total += parseFloat(element[1])
          this.pieData.push({
            name: element[0],
            value: element[1]
          })
        })

        
        // console.log(this.pieData)
      }
    },
    async getTime(){
      let {data} = await this.$api.get("/es/jsc/get_time")
      this.time = data["统计时间"].split('.').splice(0,2).join('.')
    }
  },
  mounted() {
    // this.dy = this.$route.query.dy
    // this.xfly = this.$route.query.xfly
    // console.log('right4: ',this.dy,this.xfly)
    this.getList4()
    this.getTime()

  }
}
</script>

<style lang="stylus" scoped>
.detail-box{
  display: flex;
  height: 100%;
  font-family: SourceHanSansCN-Regular !important;
  flex-direction: column;
  .title {
    height: 43px;
    margin-bottom: -5px;
    // margin-bottom: 9px;
  }
  .first {
    // margin-top 9px;
    // background-color: rgba(3, 16, 38, 0.7100);
    .firstContent{
      position: relative;
      // width 389px;
      padding: 0 18px;
      margin 0 auto;
      border-radius: 10px;
      background-color: rgba(3, 16, 38, 0.7100);
      // padding-bottom: 10px;
      padding-bottom: 28px;
    }
  }
  .second{
    margin-top 10px;
  }
  li {
    position: absolute;
    top: 0px;
    right: 18px;
    display: inline-block;
    // width: 132px;
    height: 15px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 31px;
    color: #b7b7b7;

    opacity: 1;
  }
}
</style>
